<script setup lang="ts">

import {computed, ref,inject,watch,reactive,toRefs} from "vue";
import Button from "@cps/ma-resource/button.vue";
import { Message } from '@arco-design/web-vue'
import route from "@/api/routes/route";

const colGap = inject('colGap')
const rowGap = inject('rowGap')
const buttonType = ref("1")
const record = inject('record')
const routeInfo = inject('routeInfo')
const routeSpan = inject('routeSpan')
const RoutesList = ref([])
RoutesList.value=record.value.routes
const visible = ref(false)
const formRef=ref()
const formData = reactive({
      id:'',
      about_id:record.value.id,
      about_type:routeInfo.value.about_type,
      remark: '',
      time: ''
})
watch(buttonType,(val)=>{
  routeList()
})
    const rules = {
      remark: [{required: true,message:'请输入描述', validateTrigger: 'blur'}, ],
      time: [{ required: true, message:'请选择时间',validateTrigger: 'blur'}, ],
    }
    const handleClick = () => {
      formData.id='';
      formData.remark='';
      formData.time='';
      visible.value = true;
    };
    //详情数据
    const editAction = async (data) => {
      const res = await route.read(data.id)
        visible.value = true;   
        formData.id=res.data.id
        formData.remark=res.data.remark
        formData.time=res.data.time
    }
    //删除数据
  const deleteAction = async (id,batch=false) => {
    const response = await route.deletes({ids: [id],batch:batch,about_id:record.value.id})
    response.success && Message.success(response.message || `删除成功！`)
    routeList()
  }
    //列表请求数据
    let listData={
      pageSize:100,
      page:1,
      admin:true,
      type:routeInfo.value.type,
      about_id :record.value.id
    }
    //列表
    const routeList = () => {
      if(buttonType.value=='1'){
        route.getAll(listData).then(res => { //外部路由
          RoutesList.value =  res.data
        })
      }else{
        route.getAll2(listData).then(res => {
          RoutesList.value =  res.data
        }) 
      }      
    };
    //新增
    const handleBeforeOk =async (formEl) => {
      if (!formEl) return
      await formEl.validate((valid) => {
        if (!valid) {
          if(formData.id==''){
            route.save(formData).then(res => {
              Message.success(res.message || `新增成功！`)
              visible.value = false;
              routeList()
            })
          }else{
            route.update(formData).then(res => {
              Message.success(res.message || `编辑成功！`)
              visible.value = false;
              routeList()
            })
          }
          
        }
      })
      
    };

</script>

<template>
  <a-grid-item :span="routeSpan" class="g-collapse height350">
  <a-collapse :default-active-key="['1']">
    <a-collapse-item header="路由信息" key="1">
      <template #extra>
        <a-button type="primary"  size="mini" @click.stop="handleClick()" v-auth="['routes:route:save']"><icon-plus />添加</a-button>
      </template>
      <template #header v-if="routeInfo.type=='shipment'">
        <div class="grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center">
          <div>路由</div>
          <a-radio-group style="padding: 0;" v-auth="['routes:route:list2']" type="button" v-model="buttonType" @click.stop>
            <a-radio value="1">外部</a-radio>
            <a-radio value="2">內部</a-radio>
          </a-radio-group>
        </div>
      </template>
      <div style="height: 270px;overflow: auto;">
        <a-timeline class="gt-timeline"  v-for="route in RoutesList" style="margin-bottom: 15px;">
        <a-timeline-item :label="route.time">
          <div class="w-full flex justify-between">
            <div>{{route.type?route.type.name:route.remark}}</div>
            <ul class="arco-list-item-action"  v-if="!route.type">
              <li><a-button type="dashed" size="mini" @click="editAction(route)"  v-auth="['routes:route:update']"><icon-edit /></a-button></li>
              <li>
                <a-popconfirm 
                content="确定要删除吗?"
                position="bottom"
                @ok="deleteAction(route.id)"
              >
              <a-button type="dashed" size="mini" @click=""  v-auth="['routes:route:delete']"><icon-delete /></a-button>

              </a-popconfirm>
                
              </li>
              <!-- <li>
                <a-popconfirm 
                content="确定批量删除吗?"
                position="bottom"
                @ok="deleteAction(route.id,true)"
              >
              <a-button type="outline" size="mini" @click=""  v-auth="['routes:route:delete']"><icon-delete />批量</a-button>

              </a-popconfirm>
                
              </li> -->
            </ul>
          </div>
        </a-timeline-item>
      </a-timeline>
      <a-list :bordered="false" size="small" style="display:none">
        <a-list-item title="title" description="description">
          <a-list-item-meta
              title="title"
              description="description"
          >
          </a-list-item-meta>
          <template #actions>
            <icon-edit />
            <icon-delete />
          </template>
        </a-list-item>
      </a-list>
      </div>  
      
      
     
    </a-collapse-item>
    <a-modal v-model:visible="visible" width="600px">
        <template #title>
          <div >{{  formData.id == "" ? '新增' : '编辑'}}</div>
          </template>
          <a-form ref="formRef" :rules="rules" :model="formData">
            <a-form-item field="remark" label="描述" validate-trigger="blur">
              <a-input v-model="formData.remark"  placeholder="请输入描述" />
            </a-form-item>
            <a-form-item field="time" label="时间" validate-trigger="change">
              <a-date-picker
                style="width: 100%;"
                placeholder="请选择时间"
                show-time
                v-model="formData.time"
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>          
        </a-form>
        <template #footer>        
          <a-button @click="visible = false">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk(formRef)">
            确定
          </a-button>
        </template>
      </a-modal>
  </a-collapse>
  </a-grid-item>
</template>

<style>
.route-list ._crud-header,.route-list .mb-2,.route-list .operation-tools,.route-list .mb-1{
  display:none;
}
.height350 .arco-collapse-item-content{
  max-height:350px;
  overflow-y:scroll;
}
.height350 .arco-collapse-item-content::-webkit-scrollbar {
  display: none;
}
.height350 .arco-collapse-item-content{
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.height350 .arco-list-item-action > li:not(:last-child) {
    margin-right: 5px !important;
}
.arco-timeline-item-content{
  margin-bottom: 0;
}
</style>